import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
import { useRoute } from 'vue-router';
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';

const PdfRender = defineComponent({
  name: 'PdfRender',
  setup() {
    const route = useRoute();
    const pdfh5 = ref(null);
    const pdfContainer = ref(null);
    
    onMounted(() => {
      try {
        // 获取URL参数中的PDF地址
        const pdfUrl = `${import.meta.env.VITE_APP_BASE_URL}/${decodeURIComponent(route.query.url)}`;
        
        // 初始化pdfh5实例，使用简单配置
        pdfh5.value = new Pdfh5(pdfContainer.value, {
          pdfurl: pdfUrl,
          lazy: true,
          zoomEnable: true,
          pageNumEnable: true
        });
        
        // 监听事件
        pdfh5.value.on('complete', (status, msg, time) => {
          console.log('PDF加载完成，状态：', status, '，信息：', msg, '，耗时：', time, '毫秒');
        });
        
        pdfh5.value.on('error', (error) => {
          console.error('PDF加载错误:', error);
        });
        
      } catch (error) {
        console.error('PDF初始化失败:', error);
      }
    });
    
    onUnmounted(() => {
      // 组件卸载时销毁pdfh5实例
      if (pdfh5.value) {
        pdfh5.value.destroy();
      }
    });
    
    return () => (
      <div style={{ width: '100%', height: '100vh', overflow: 'hidden' }}>
        <div ref={pdfContainer} style={{ width: '100%', height: '100%' }} />
      </div>
    );
  }
});

export default PdfRender;